<template>
  <div>
    <el-row>
      <search v-model="form" @submit="getTableList">
        <template slot="item">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="关键字"></el-input>
          </el-form-item>
        </template>
        <template slot="btns">
          <el-button type="primary" @click="addMenu" v-if="$hasButton('add')">添加</el-button>
        </template>
      </search>

      <el-card class="small-card card-margin">
        <div style="margin-bottom: 10px;padding-left: 15px" v-if="chooseList.length > 0">
          <el-button size="mini" type="danger" @click="removeList">删除{{chooseList.length}}条</el-button>
        </div>
<!--                  :edit-config="{trigger: 'click', mode: 'row'}"
:edit-render="{name: 'input'}"
:edit-render="{name: 'input'}"
:edit-render="{name: 'input'}"
:edit-render="{name: 'input'}"
:edit-render="{name: 'input'}"
:edit-render="{name: 'input'}"
-->
        <vxe-table
          resizable
          ref="xTree"
          :checkbox-config="{labelField: 'userName'}"
          :data="table.list">
          <vxe-table-column type="checkbox" title="账号" tree-node></vxe-table-column>
          <vxe-table-column field="relName" title="昵称" ></vxe-table-column>
          <vxe-table-column field="phone" title="电话" ></vxe-table-column>
          <vxe-table-column field="email" title="邮箱" ></vxe-table-column>
          <vxe-table-column field="sex" title="性别" ></vxe-table-column>
          <vxe-table-column field="roleName" title="角色" >
            <template v-slot="{ row}">
              <el-tag>
                {{row.roleName}}
              </el-tag>
            </template>
          </vxe-table-column>
<!--          <vxe-table-column field="lastLogin" title="最后登录时间" ></vxe-table-column>-->
          <vxe-table-column field="phone" title="电话" ></vxe-table-column>
<!--          <vxe-table-column field="avatar" title="头像" ></vxe-table-column>-->
          <vxe-table-column field="introduction" title="介绍" ></vxe-table-column>
<!--          <vxe-table-column field="onlineTime" title="在线时长" ></vxe-table-column>-->
          <vxe-table-column field="status" title="状态">
              <template v-slot="{ row}">
                <el-switch
                  :disabled="!$hasButton('edit')"
                  style="display: block"
                  v-model="row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  @change="chageStatus(row)"
                  active-text="启用"
                  inactive-text="禁用">
                </el-switch>
              </template>
            </vxe-table-column>
          <vxe-table-column  title="操作" >
            <template v-slot="{ row}">
              <el-button size="mini" @click="handleEdit( row)" v-if="$hasButton('edit')">编辑</el-button>
              <el-button size="mini" @click="handleBingDing( row)" v-if="$hasButton('edit')">绑定角色</el-button>
              <el-button size="mini" type="danger" @click="handleDelete( row)" v-if="$hasButton('remove')">删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
      <mform v-model="form" :type="editType" :show.sync="visible" width="35%" v-if="visible" @refresh="getTableList"></mform>
      <bingDingRole v-model="form" :show.sync="visible1" width="20%" v-if="visible1" :role-list="roleList" @refresh="getTableList"></bingDingRole>
    </el-row>
  </div>
</template>

<script>
  import search from '@/components/my/TopSerach'
  import {USER, SYSTEM, ROLE} from '@/api'
  import mform from './form'
  import bingDingRole from './bingDingRole'

  export default {
    components: {
      search,
      mform,
      bingDingRole
    },
    data() {
      return {
        editType: 0,
        chooseList: [],
        visible: false,
        visible1: false,
        form: {},
        roleList: [],
        table: {
          total: 0,
          page: 1,
          pageSize: 10,
          query: {},
          list: []
        }
      }
    },
    computed: {},
    mounted() {
      this.getRoleList()
      this.getTableList()
    },
    watch: {
      form(v) {
      }
    },
    methods: {
      getTableList() {
        USER.list(this.form).then(res => {
          if (res.code === 200) {
            this.table.list = res.data
            this.table.total = res.total
          } else {
            this.table.list = []
            this.table.total = 0
          }
        })
      },
      handleEdit(row) {
        this.form = row
        this.visible = true
        this.editType = 1
      },
      handleview(row) {
        this.form = row
        this.visible = true
        this.editType = 2
      },
      handleDelete(row) {
        this.$confirm(`确定要删除${row.title + type}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        })
      },
      handleBingDing(row) {
        this.form = row
        this.visible1 = true
      },
      addMenu() {
        this.form = {
          fatherId: '0',
          menuType: 0,
          menuState: 1,
          level: 1
        }
        this.editType = 0
        this.visible = true
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      chageStatus(val) {
        USER.update(val).then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
          // this.getTableList()
        })

      },
      getRoleList() {
        ROLE.list({}).then(res => {
          if (res.code === 200) {
            this.roleList = res.data
          } else {
            this.roleList = []
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*.small-card {*/
  /*  ::v-deep .el-card__body {*/
  /*    padding: 10px;*/
  /*  }*/
  /*}*/

  .el-form {
    ::v-deep .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
